<template>
  <view class="gas-container">
    <!-- 白色风格导航栏 -->
      <view class="custom-navbar">
        <text class="navbar-title">就近加油</text>
        <view class="action-group">
          <!-- 搜索按钮 -->
          <view class="search-btn" @click="handleSearch">
            <uni-icons type="search" size="18" color="#fff" />
            <text class="btn-text">搜索</text>
          </view>
          
          <!-- 地图切换按钮 -->
          <view class="map-mode-btn" @click="switchMapMode">
            <uni-icons type="map" size="18" color="#1677ff" />
            <text class="btn-text">地图模式</text>
          </view>
        </view>
      </view>

    <!-- 加油站列表 -->
    <scroll-view 
      class="station-list"
      scroll-y
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 空状态提示 -->
      <view v-if="stationList.length === 0" class="empty-tips">
        <uni-icons type="alert" size="48" color="#999" />
        <text>正在加载加油站信息...</text>
      </view>

      <!-- 数据列表 -->
      <view 
        v-for="station in stationList"
        :key="station.id"
        class="station-card"
        @click="handleStationSelect(station)"
      >
        <image 
          :src="station.image || defaultImage" 
          class="station-img"
          mode="aspectFill"
          lazy-load
          @error="handleImageError"
        />
        <view class="info-container">
          <!-- 标题行 -->
          <view class="title-row">
            <text class="station-name text-bold">{{ station.name }}</text>
            <view class="distance-tag">
              <uni-icons type="location" size="14" color="#1890ff" />
              <text class="distance-text">{{ formatDistance(station.distance) }}</text>
            </view>
          </view>

          <!-- 价格信息 -->
          <view class="price-row">
            <view class="price-info">
              <text class="current-price">¥{{ station.price }}</text>
              <text class="price-unit">/升</text>
              <text v-if="station.discount" class="discount-tag">
                {{ station.discount }}
              </text>
            </view>
            <text class="original-price">原价:¥{{ station.originalPrice }}</text>
          </view>

          <!-- 优惠信息 -->
          <view v-if="station.promotions" class="promotion-container">
            <view 
              v-for="(promo, index) in station.promotions"
              :key="index"
              class="promo-tag"
            >
              {{ promo }}
            </view>
          </view>

          <!-- 地址信息 -->
          <view class="address-row">
            <uni-icons type="info" size="14" color="#666" />
            <text class="address-text">{{ station.address }}</text>
          </view>
        </view>

        <!-- 导航按钮 -->
        <button 
          class="navigate-btn"
          @click.stop="handleNavigation(station)"
        >
          <uni-icons type="paperplane" size="16" color="#fff" />
          导航
        </button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 静态数据初始化
const stationList = ref([
  {
    id: 1,
    name: '中国石油加油站',
    distance: 44,
    price: 5.97,
    originalPrice: 6.50,
    discount: '满200减20',
    promotions: [],
    address: '山阳区人民中路32号',
    image: '/static/logo.png',
    latitude: 35.219518,
    longitude: 113.240964
  },
  {
    id: 2,
    name: '中国石油加油站(人民路站)',
    distance: 68,
    price: 5.97,
    originalPrice: 6.50,
    discount: '满200减20',
    promotions: [],
    address: '山阳区人民中路35号',
    image: '/static/logo.png',
    latitude: 35.219518,
    longitude: 113.240964
  },
  {
    id: 3,
    name: '中国石油加油站(中州站)',
    distance: 120,
    price: 5.97,
    originalPrice: 6.50,
    discount: '夜间优惠',
    promotions: [],
    address: '山阳区中州大道18号',
    image: '/static/logo.png',
    latitude: 35.219518,
    longitude: 113.240964
  },
  {
    id: 4,
    name: '中国石油加油站(解放路站)',
    distance: 150,
    price: 5.97,
    originalPrice: 6.50,
    discount: '会员专属优惠',
    promotions: [],
    address: '解放路与建设路交叉口',
    image: '/static/logo.png',
    latitude: 35.219518,
    longitude: 113.240964
  }
])

// 状态管理
const isRefreshing = ref(false)
const defaultImage = ref('/static/logo.png')

// 图片加载失败处理
const handleImageError = (e) => {
  e.target.src = defaultImage.value
}

// 下拉刷新
const onRefresh = () => {
  isRefreshing.value = true
  setTimeout(() => {
    isRefreshing.value = false
    uni.showToast({ title: '刷新成功', icon: 'success' })
  }, 1000)
}

// 距离格式化
const formatDistance = (distance) => {
  return distance < 1000 ? `${distance}m` : `${(distance/1000).toFixed(1)}km`
}

// 页面跳转
const handleSearch = () => {
  uni.navigateTo({ url: '/pages/gas/search' })
}

const switchMapMode = () => {
  uni.navigateTo({ url: '/pages/gas/map' })
}

// 地图导航
const handleNavigation = (station) => {
  uni.openLocation({
    latitude: station.latitude,
    longitude: station.longitude,
    name: station.name,
    address: station.address
  })
}

// 跳转详情页
const handleStationSelect = (station) => {
  uni.navigateTo({
    url: `/pages/baoyang/jiadetail/jiadetail?id=${station.id}`
  })
}
</script>

<style lang="scss" scoped>
$primary-color: #1890ff;
$discount-color: #ff4d4f;
$promo-bg: #fff7e6;

.gas-container {
  height: 100vh;
  background: #f5f7fa;
  position: relative;
}

/* 修复后的样式 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 88rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

  .navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .action-group {
    display: flex;
    gap: 24rpx;
    align-items: center;

    .search-btn {
      background: #1677ff;
      border-radius: 32rpx;
      padding: 12rpx 24rpx;
      display: flex;
      align-items: center;

      .btn-text {
        color: #fff;
        font-size: 28rpx;
        margin-left: 8rpx;
      }
    }

    .map-mode-btn {
      border: 1rpx solid #1677ff;
      border-radius: 32rpx;
      padding: 12rpx 24rpx;
      display: flex;
      align-items: center;

      .btn-text {
        color: #1677ff;
        font-size: 28rpx;
        margin-left: 8rpx;
      }
    }
  }
}

/* 内容区域需要增加顶部间距 */
.station-list {
  padding-top: 88rpx; /* 与导航栏高度一致 */
  height: calc(100vh - 88rpx);
}


.empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
  color: #999;
  font-size: 28rpx;
  
  text {
    margin-top: 20rpx;
  }
}

.station-card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  position: relative;
  animation: cardEntrance 0.5s ease forwards;
  opacity: 0;
  transform: translateY(30rpx);

  .station-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    margin-right: 24rpx;
  }

  .info-container {
    flex: 1;
  }

  .title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .station-name {
      font-size: 32rpx;
      color: #333;
      max-width: 400rpx;
      font-weight: 600;
    }

    .distance-tag {
      display: flex;
      align-items: center;
      background: #e6f7ff;
      padding: 4rpx 16rpx;
      border-radius: 24rpx;

      .distance-text {
        color: $primary-color;
        font-size: 24rpx;
        margin-left: 8rpx;
      }
    }
  }

  .price-row {
    margin-bottom: 16rpx;

    .price-info {
      display: flex;
      align-items: baseline;

      .current-price {
        color: $discount-color;
        font-size: 40rpx;
        font-weight: 600;
      }

      .price-unit {
        color: #666;
        font-size: 24rpx;
        margin-left: 8rpx;
      }

      .discount-tag {
        background: $promo-bg;
        color: #fa8c16;
        font-size: 24rpx;
        padding: 4rpx 16rpx;
        border-radius: 24rpx;
        margin-left: 16rpx;
      }
    }

    .original-price {
      color: #999;
      font-size: 24rpx;
      text-decoration: line-through;
    }
  }

  .promotion-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    margin-bottom: 16rpx;

    .promo-tag {
      background: #fffbe6;
      color: #fa8c16;
      font-size: 24rpx;
      padding: 4rpx 16rpx;
      border-radius: 24rpx;
      border: 1rpx solid #ffe58f;
    }
  }

  .address-row {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 24rpx;

    .address-text {
      margin-left: 8rpx;
    }
  }

  .navigate-btn {
    position: absolute;
    right: 24rpx;
    bottom: 24rpx;
    background: $primary-color;
    color: #fff;
    padding: 8rpx 32rpx;
    border-radius: 32rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;

    &::after {
      border: none;
    }
  }
}

@keyframes cardEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>